<template>
  <a-card :title="'工艺单打印'">
    <!-- <a-button type="primary" style="position: absolute;right: 25px;top:60px" v-print="'#print'">打印</a-button> -->
    <template #extra>
      <a-button type="primary" v-print="'#print'">打印</a-button>
    </template>
    <a-tabs default-active-key="1" @change="callback" v-model="tabMenu">
      <a-tab-pane key="1" tab="新款扩色工艺单">
      </a-tab-pane>
      <a-tab-pane key="2" tab="大货工艺材料单" force-render>
      </a-tab-pane>
      <a-tab-pane key="3" tab="特殊工艺确认单" force-render>
      </a-tab-pane>
      <a-tab-pane key="4" tab="特艺定位花打印模版" force-render>
      </a-tab-pane>
      <a-tab-pane key="5" tab="工艺材料单" force-render>
      </a-tab-pane>
    </a-tabs>

    <div id="print">
      <div style="text-align: center;color: rgba(0, 0, 0, 0.85);font-weight: bold;font-size: 24px;">
        <span v-if="tabMenu == 1">新款扩色工艺单</span>
        <span v-if="tabMenu == 2">大货工艺材料单</span>
      </div>
      <div style="display:flex;flex-direction:row" id="rd">
        <div class="main" :style="{ width: tabMenu == 2 ? '50%' : '100%' }" v-if="tabMenu == 1 || tabMenu == 2">

          <div id="firstDe">
            <a-row style="border: 1px solid;">
              <a-col :span="2" class="title">
                样衣号
              </a-col>
              <a-col :span="4" class="text" style="text-align:center">
                {{ list.sampleCode }}
              </a-col>
              <a-col :span="2" class="title" style="border-left: 1px solid;">
                款号
              </a-col>
              <a-col :span="3" class="text" style="text-align:center">
                {{ list.designName }}
              </a-col>
              <a-col :span="2" class="title" style="border-left: 1px solid;">
                品名
              </a-col>
              <a-col :span="3" class="text" style="text-align:center">
                {{ list.sampleName }}
              </a-col>
              <a-col :span="2" class="title" style="border-left: 1px solid;">
                销售色
              </a-col>
              <a-col :span="6" class="text" style="text-align:center">
                {{ list.stycolorid }}
              </a-col>
            </a-row>
            <div style="aspect-ratio: 2/1;width: 100%;border: 1px solid;border-top:none;display: flex;padding: 5px"
              :style="{ justifyContent: 'center' }">
              <img :src="list.styleImg" :style="{ height: '100%', width: '100%', objectFit: 'contain' }"
                :alt="list.styleImg">
            </div>
            <div style="display:flex;border: 1px solid;border-top: none;aspect-ratio: 10 / 1;overflow: hidden;"
              v-if="craftBillTemplateVos.length">
              <div class="title" style="width:26px;line-height: 15px;">
                统一工艺
              </div>
              <div style="width: calc(100% - 26px);display: flex;flex-direction: column;justify-content: space-between;">
                <div style="display:flex;flex-direction:column;text-align:left;padding: 0 5px;font-size: 13px;"
                  class="text">
                  <span v-for="item, i in craftBillTemplateVos" :key="i">
                    {{ i + 1 }}:{{ item.partName }}{{ item.description }}
                  </span>
                </div>
                <div style="padding: 4px 20px 0px;border-top: 1px solid;margin-left:5px">
                  <a-row class="text">
                    <a-col :span="6">
                      ✔不可拆线
                    </a-col>
                    <a-col :span="6">
                      ✔点位
                    </a-col>
                    <a-col :span="6">
                      ✔不可锥位
                    </a-col>
                    <a-col :span="6">
                      ✔不用色粉
                    </a-col>
                  </a-row>
                </div>
              </div>
            </div>
            <div style="display:flex;border: 1px solid;border-top: none;aspect-ratio: 4 / 1;overflow: hidden;"
              v-if="tabMenu == 2">
              <div class="title" style="width: 26px;line-height: 15px;">
                缝制工艺
              </div>
              <div style="display: flex;flex-direction: column;justify-content: space-between;width: 100%;">
                <div
                  style="width: calc(100% - 26px);padding:5px;white-space: pre-line;margin-top:-20px;font-size: 13px;line-height: 1.3;"
                  class="text">
                  {{ list.commonReq }}
                </div>
                <div style="padding: 4px 20px 0px;margin-left:5px" v-if="brand.indexOf('LESS')>=0">
                  <a-row style="color: #000;">
                    具体细节敬请参照样衣，不详之处及时与技术部联系！
                  </a-row>
                </div>
              </div>
            </div>

            <div style="display:flex;border: 1px solid;border-top: none;" v-if="partList1.length && tabMenu == 1">
              <div class="title" style="width: 26px;line-height: 15px;">
                隐形工艺
              </div>
              <div style="display:flex;flex-direction:column;width: calc(100% - 26px);padding:5px;">
                <div style="display:flex">
                  <div v-for="item, i in partList1" :key="i"
                    :style="{ display: 'flex', justifyContent: partList1.length <= 1 ? 'flex-start' : 'space-between', width: partList1.length <= 1 ? '100%' : `${98 / partList1.length}%` }">
                    <div>
                      <img :src="item.imgurl"
                        :style="{ width: partList1.length <= 1 ? '300px' : '250px', height: partList1.length <= 1 ? '200px' : '150px', objectFit: 'contain' }"
                        :alt="item.imgurl">
                    </div>
                  </div>
                </div>
                <div style="display:flex;flex-direction:column;margin-top:5px" class="text">
                  <span v-for="item, i in partList1" :key="i">
                    {{ i + 1 }}:{{ item.description }}
                  </span>
                </div>
              </div>
            </div>
            <div style="display:flex;border: 1px solid;border-top: none;" v-if="partList2.length && tabMenu == 1">
              <div class="title" style="width: 26px;line-height: 15px;">
                拼缝
              </div>
              <div style="display:flex;flex-direction:column;width: calc(100% - 26px);padding:5px;">
                <div style="display:flex">
                  <div v-for="item, i in partList2" :key="i"
                    :style="{ display: 'flex', justifyContent: partList2.length <= 1 ? 'left' : 'space-between', width: partList2.length <= 1 ? '100%' : `${98 / partList2.length}%` }">
                    <div>
                      <img :src="item.imgurl"
                        :style="{ width: partList2.length <= 1 ? '300px' : '250px', height: partList2.length <= 1 ? '200px' : '150px', objectFit: 'contain' }"
                        :alt="item.imgurl">
                    </div>
                  </div>
                </div>
                <div style="display:flex;flex-direction:column" class="text">
                  <span v-for="item, i in partList2" :key="i">
                    {{ i + 1 }}:{{ item.description }}
                  </span>
                </div>
              </div>
            </div>
            <div style="display:flex;border: 1px solid;border-top: none;" v-if="list.beof && tabMenu == 1">
              <div class="title" style="width: 26px;line-height: 15px;">
                后道工序
              </div>
              <div style="width: calc(100% - 26px);padding:5px;white-space: pre-line;margin-top:-20px;line-height: 1.3;"
                class="text">
                {{ list.beof }}
              </div>
            </div>
            <div style="display:flex;border: 1px solid;border-top: none;" v-if="partList3.length && tabMenu == 1">
              <div class="title" style="width: 26px;line-height: 15px;">
                主唛
              </div>
              <div style="display:flex;flex-direction:column;width: calc(100% - 26px);padding:5px;">
                <div style="display:flex">
                  <div v-for="item, i in partList3" :key="i"
                    :style="{ display: 'flex', justifyContent: partList3.length <= 1 ? 'left' : 'space-between', width: partList3.length <= 1 ? '100%' : `${98 / partList3.length}%` }">
                    <div>
                      <img :src="item.imgurl"
                        :style="{ width: partList3.length <= 1 ? '300px' : '250px', height: partList3.length <= 1 ? '200px' : '150px', objectFit: 'contain' }"
                        :alt="item.imgurl">
                    </div>
                  </div>
                </div>
                <div style="display:flex;flex-direction:column" class="text">
                  <span v-for="item, i in partList3" :key="i">
                    {{ i + 1 }}:{{ item.description }}
                  </span>
                </div>
              </div>
            </div>
            <div
              style="display:flex;border: 1px solid;border-top: none;aspect-ratio: 5 / 1;overflow: hidden;font-size: 13px;"
              v-if="list.beof && tabMenu == 2">
              <div class="title" style="width: 26px;line-height: 15px;">
                后道工序
              </div>
              <div style="width: calc(100% - 26px);padding:5px;white-space: pre-line;margin-top:-20px;" class="text">
                {{ list.beof }}
              </div>
            </div>
            <!-- <div
              style="display:flex;border: 1px solid;border-top: none;"
              v-if="list.beof && tabMenu == 2"
            >
              <div
                class="title"
                style="width: 26px;;"
              >
                检验要点
              </div>
              <div
                style="width: calc(100% - 36px);padding:5px;white-space: pre-line;margin-top:-20px;"
                class="text"
              >
                {{list.beof}}
              </div>
            </div> -->
            <div style="display:flex;border: 1px solid;border-top: none;aspect-ratio: 5 / 1;" v-if="tabMenu == 2">
              <div class="title" style="width: 26px;line-height: 15px;">
                吊牌包装
              </div>
              <div style="width: calc(100% - 26px);padding:5px;">
                <div style="display:flex;flex-direction:row;height: 100%;">
                  <div class="text" style="display:flex;flex-direction:column;width:30%;font-size: 13px; ">
                    <span v-if="list.bzCode">包装编号:{{ list.bzCode }}</span>
                    <span v-if="list.bzName"> 塑料包装袋编号:{{ list.bzName }}</span>
                    <span>{{ list.bzMemo }}</span>
                    <span v-if="list.tag && list.tag.length">{{ list.tag[0].description }}</span>

                  </div>
                  <div style="width:50%;display:flex;justify-content: center;padding-right: 10px">
                    <img :src="list.bzImg" :style="{ width: '100%', objectFit: 'contain' }" :alt="list.bzImg">
                  </div>
                  <div style="width:20%;display:flex;justify-content: center;" v-if="list.tag && list.tag.length">
                    <img :src="list.tag[0].imgurl" :style="{ width: '100%', objectFit: 'contain' }"
                      :alt="list.tag[0].imgurl">
                  </div>
                </div>
              </div>
            </div>
            <a-row style="border: 1px solid;border-top: none;height:20px;line-height: 20px;text-align: center;"
              v-if="tabMenu == 1">
              <a-col :span="2" class="title">
                工艺师
              </a-col>
              <a-col :span="4" class="text" style="text-align:center">
                {{ list.statusUser }}
              </a-col>
              <a-col :span="2" class="title" style="border-left: 1px solid;height: 100%;">
                制版师
              </a-col>
              <a-col :span="4" class="text">
                {{ list.bs }}
              </a-col>
              <a-col :span="2" class="title" style="border-left: 1px solid;height: 100%;">
                放码师
              </a-col>
              <a-col :span="4" class="text" style="text-align:center">
                {{ list.fmshor }}
              </a-col>
              <a-col :span="2" class="title" style="border-left: 1px solid;height: 100%;">
                时间
              </a-col>
              <a-col :span="4" class="text" style="text-align:center">
                {{ list.statusTime }}
              </a-col>
            </a-row>
            <a-row style="border: 1px solid;border-top: none;" :style="{ aspectRatio: tabMenu == 2 ? '32 / 1' : '0:0' }"
              v-if="tabMenu == 2">
              <a-col :span="2" class="title" style="height: 100%;">
                工艺师
              </a-col>
              <a-col :span="4" class="text" style="text-align:center">
                {{ list.statusUser }}
              </a-col>
              <a-col :span="2" class="title" style="border-left: 1px solid;height: 100%;">
                制版师
              </a-col>
              <a-col :span="4" class="text">
                {{ list.bs }}
              </a-col>
              <a-col :span="2" class="title" style="border-left: 1px solid;height: 100%;">
                放码师
              </a-col>
              <a-col :span="4" class="text" style="text-align:center">
                {{ list.fmshor }}
              </a-col>
              <a-col :span="2" class="title" style="border-left: 1px solid;height: 100%;">
                时间
              </a-col>
              <a-col :span="4" class="text" style="text-align:center">
                {{ list.statusTime }}
              </a-col>
            </a-row>
          </div>

        </div>
        <div v-if="tabMenu == 2" style="width:50%;border:1px solid;margin-left: -1px;border-top: none;">
          <div v-if="tabMenu == 2" class="title"
            style="border-top: 1px solid;border-bottom: 1px solid;border-right: none;">工艺编写</div>
          <!-- <div
            style="display:flex;border: 1px solid;border-top: none;border-left:none"
            v-if="partList1.length && tabMenu == 2"
          >
            <div
              class="title"
              style="width: 26px;;"
            >
              隐形工艺
            </div>
            <div style="display:flex;flex-direction:column;width: calc(100% - 36px);padding:5px;">
              <div style="display:flex">
                <div
                  v-for="item,i in partList1"
                  :key="i"
                  :style="{ display: 'flex', justifyContent: partList1.length<=1 ?'flex-start':'space-between',width:partList1.length<=1 ?'100%':`${98/partList1.length}%`}"
                >
                  <div>
                    <img
                      :src="item.imgurl"
                      :style="{ width: partList1.length<=1 ?'300px':'250px',height: partList1.length<=1 ?'200px':'150px',objectFit: 'contain'}"
                      :alt="item.imgurl"
                    >
                  </div>
                </div>
              </div>
              <div
                style="display:flex;flex-direction:column;margin-top:5px"
                class="text"
              >
                <span
                  v-for="item,i in partList1"
                  :key="i"
                >
                  {{i+1}}:{{item.description}}
                </span>
              </div>
            </div>
          </div> -->
          <!-- <div
            style="display:flex;border: 1px solid;border-top: none;border-left:none"
            v-if="partList2.length"
          >
            <div
              class="title"
              style="width: 26px;;"
            >
              拼缝
            </div>
            <div style="display:flex;flex-direction:column;width: calc(100% - 36px);padding:5px;">
              <div style="display:flex">
                <div
                  v-for="item,i in partList2"
                  :key="i"
                  :style="{ display: 'flex', justifyContent: partList2.length<=1 ?'left':'space-between',width:partList2.length<=1 ?'100%':`${98/partList2.length}%`}"
                >
                  <div>
                    <img
                      :src="item.imgurl"
                      :style="{ width: partList2.length<=1 ?'300px':'250px',height: partList2.length<=1 ?'200px':'150px',objectFit: 'contain'}"
                      :alt="item.imgurl"
                    >
                  </div>
                </div>
              </div>
              <div
                style="display:flex;flex-direction:column"
                class="text"
              >
                <span
                  v-for="item,i in partList2"
                  :key="i"
                >
                  {{i+1}}:{{item.description}}
                </span>
              </div>
            </div>
          </div> -->
          <div style="display:flex;flex-wrap:wrap;width:100%;">
            <div v-for="item, i in allPart" :key="i" style="border-top: 1px solid;margin-top: -1px;"
              :style="{ width: `${item.width}%`, aspectRatio: `${item.num}/1.033` }">
              <div style="display:flex;position: relative;height: calc(100% - 35px)">
                <div class="title" style="width: 26px;border-bottom: 1px solid;writing-mode: tb;letter-spacing: 4px;">
                  {{ item.partName }}
                </div>
                <div
                  style="display:flex;flex-direction:row;border-right: 1px solid;border-bottom: 1px solid;width:100%;padding:5px 0;justify-content: space-around;">
                  <!-- <div
                    style="display:flex;flex-direction:column; text-align: center;margin: 10px 0;"
                    v-for="subitem,i in item.list"
                    :key="i"
                  > -->
                  <img :src="item.imgurl" :style="{ width: '100%', objectFit: 'contain' }" :alt="item.imgurl"
                    @load="(e) => loadimg(e, item)">
                  <!-- </div> -->
                </div>

              </div>
              <div style="border-bottom:1px solid;border-right:1px solid;height:35px;overflow: hidden;padding: 0 5px;">
                <span :key="i" class="overText"> {{ item.description }}</span>
              </div>
            </div>
          </div>
          <div
            style="display:flex;border-top: 1px solid;border-bottom: 1px solid;margin-top: -1px;margin-bottom: -1px;aspect-ratio: 4 / 1.033;;overflow: hidden;font-size: 13px;"
            v-if="tabMenu == 2 && brand.indexOf('LESS')>=0">
            <div class="title" style="width: 26px;line-height: 15px;">
              注意事项
            </div>
            <div style="width: calc(100% - 26px);padding:5px;white-space: pre-line;margin-top:-20px;" class="text">
              {{ list.attention }}
            </div>
          </div>
          <!-- <a-row
            style="border: 1px solid;border-top: none;border-left:none"
          
          >
            <a-col
              :span="2"
              class="title"
            >
              工艺师
            </a-col>
            <a-col
              :span="4"
              style="text-align:center;font-size:13px;"
            >
              {{list.statusUser}}
            </a-col>
            <a-col
              :span="2"
              class="title"
              style="border-left: 1px solid;"
            >
              制版师
            </a-col>
            <a-col
              :span="4"
              style="text-align:center;font-size:13px;"
            >
              {{list.bs}}
            </a-col>
            <a-col
              :span="2"
              class="title"
              style="border-left: 1px solid;"
            >
              放码师
            </a-col>
            <a-col
              :span="4"
              style="text-align:center;font-size:13px;"
            >
              {{list.fmshor}}
            </a-col>
            <a-col
              :span="2"
              class="title"
              style="border-left: 1px solid;"
            >
              时间
            </a-col>
            <a-col
              :span="4"
              style="text-align:center;font-size:13px;"
            >
              {{list.statusTime}}
            </a-col>
          </a-row> -->
        </div>
        <div v-if="tabMenu == 3" style="width:100%">
          <div id="firstDe">
            <a-descriptions style="text-align:center;color: #000;" title="特殊工艺确认单" bordered>
              <a-descriptions-item label="款号">
                {{ list.designName }}
              </a-descriptions-item>
              <a-descriptions-item label="样衣号">
                {{ list.sampleCode }}
              </a-descriptions-item>
              <a-descriptions-item label="季度">
                {{ list.scseason }}
              </a-descriptions-item>
              <a-descriptions-item label="品名">
                {{ list.sampleName }}
              </a-descriptions-item>
              <a-descriptions-item label="品类">
                {{ list.sampleCat }}
              </a-descriptions-item>
              <a-descriptions-item label="色量">
                {{ list.allColor }}
              </a-descriptions-item>
            </a-descriptions>
          </div>
          <div
            style="border-width: 1px 1px 0 1px;border-style: solid;border-color: #000;font-size: 14px;color: #000;line-height: 1.5em;padding: 5px;height: 94px;overflow: hidden;justify-content: center;flex-direction: column;display: flex;">
            排料/剪裁要求：{{ list.tyReq }}
          </div>
          <div
            style="border-width: 1px 1px 0 1px;border-style: solid;border-color: #000;font-size: 14px;color: #000;line-height: 1.5em;padding: 5px;height: 94px;overflow: hidden;justify-content: center;flex-direction: column;display: flex;">
            特殊工序：{{ list.tyProcess }}
          </div>
          <div style="border: 1px solid #000;color: #000;">
            <div v-for="item, i in specList" :key="i">
              <a-row class="specTitle">
                {{ item.name }}
              </a-row>
              <a-row>
                <a-col :span='8' v-for="subitem, i in item.list" :key="i">
                  <div style="display:flex;flex-direction:column;border-style: solid;border-color: #000;margin-top: -1px;"
                    :style="'border-width: ' + ((i + 1) % 3 == 0 ? '1px 0 1px 0;' : '1px 1px 1px 0;')">
                    <span class="color">色号:{{ subitem.styColorId }}</span>
                    <img :src="subitem.imgurl" :alt="subitem.imgurl"
                      style="width:200px;margin: auto;height: 200px;object-fit: scale-down;margin-top:10px">
                    <span class="color">跳码:{{ subitem.jumpSize }}</span>
                  </div>
                </a-col>
              </a-row>
            </div>
            <a-row class="comfirm">
              确认意见：
            </a-row>
          </div>
        </div>
        <div v-if="tabMenu == 4" style="width:100%" id="firstDe">
          <div class="specImg" style="margin-bottom:20px;" v-for="item, i in list.craftBillSpec" :key="i">
            <div style="text-align: center;color: rgba(0, 0, 0, 0.85);font-weight: bold;font-size: 24px;">
              特殊工艺确认单
            </div>
            <div
              style="display:flex;justify-content: end;margin-top: -23px;font-size: 14px;font-weight: 500;color: rgb(0, 0, 0);">
              定位花稿{{ i + 1 }}/{{ list.craftBillSpec.length }}</div>
            <a-row style="border: 1px solid;color: #000;text-align: center;">
              <a-col :span="8" style="border-right: 1px solid;display: flex;">
                <div style="border-right: 1px solid;font-weight: 500;font-size: 16px;width:140px;background: #fafafa;">
                  款号
                </div>
                <div style="text-align: center;width: 100%;color: #000;line-height: 24px;">{{ list.designName }}</div>
              </a-col>
              <a-col :span="8" style="border-right: 1px solid;display: flex;">
                <div style="border-right: 1px solid;font-weight: 500;font-size: 16px;width:200px;background: #fafafa;">
                  样衣号</div>
                <div style="text-align: center;width: 100%;color: #000;line-height: 24px;">{{ list.sampleCode }}</div>
              </a-col>
              <a-col :span="8" style="display: flex;">
                <div
                  style="border-right: 1px solid;font-weight: 500;font-size: 16px;width:140px;    background: #fafafa;">
                  色号</div>
                <div style="text-align: center;width: 100%;color: #000;line-height: 24px;">{{ item.styColorId }}</div>
              </a-col>
            </a-row>
            <div class="specPic" :style="{ justifyContent: 'center' }">
              <img :src="item.imgurl" :style="{ width: '100%', objectFit: 'contain' }" :alt="item.imgurl">
            </div>
          </div>
        </div>
        <div v-if="tabMenu == 5" style="width:100%">
          <div style="text-align: center;color: rgba(0, 0, 0, 0.85);font-weight: bold;font-size: 24px;">
            工艺材料单
          </div>
          <a-row style="border: 1px solid;">
            <a-col :span="2" class="title">
              款号
            </a-col>
            <a-col :span="3" class="text" style="text-align:center">
              {{ list.designName }}
            </a-col>
            <a-col :span="2" class="title" style="border-left: 1px solid;">
              样衣号
            </a-col>
            <a-col :span="3" class="text" style="text-align:center">
              {{ list.sampleCode }}
            </a-col>
            <a-col :span="4" class="title" style="border-left: 1px solid;">
              安全技术类别
            </a-col>
            <a-col :span="4" class="text" style="text-align:center">
              {{ list.safeTechType }}
            </a-col>
            <a-col :span="2" class="title" style="border-left: 1px solid;">
              执行标准
            </a-col>
            <a-col :span="4" class="text" style="text-align:center">
              {{ list.execStandard }}
            </a-col>
          </a-row>
          <a-row style="border: 1px solid;border-top:none">
            <a-col :span="8" style="border-right:1px solid">
              <a-row>
                <a-col :span="6" class="title" style="border-bottom:1px solid">
                  销售色
                </a-col>
                <a-col :span="18" class="text" style="border-bottom:1px solid;text-align: center;">
                  {{ list.stycolorId }}
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="6" class="title">
                  品名
                </a-col>
                <a-col :span="18" class="text" style="text-align: center;">
                  {{ list.sampleName }}
                </a-col>
              </a-row>
            </a-col>
            <a-col :span="16">
              <a-row>
                <a-col :span="4" class="title" style="flex-direction: column;">
                  <span>洗水</span>
                  <span>图标</span>
                </a-col>
                <a-col :span="20" style="display:flex;justify-content: center;padding-top: 7px;">
                  <div v-for="item, i in washNo" :key="i" style="">
                    <img style="    height: 36px;object-fit: contain;" :src="require(`@assets/washIcon/${item}.png`)"
                      alt="" srcset="">
                  </div>

                </a-col>
              </a-row>
            </a-col>
          </a-row>
          <a-row style="border: 1px solid;border-top:none">
            <a-col :span="2" class="title">
              维护方法
            </a-col>
            <a-col :span="22" class="text" style="text-align:center">
              {{ list.maintainWay }}
            </a-col>

          </a-row>
          <div style="border: 1px solid;border-top:none;display:flex;text-align:center">
            <div style="width:50%;display:flex">
              <div class="title" style="width: 26px;;">
                纸样
              </div>
              <div style="width: calc(100% - 26px);display: flex;flex-direction: row;">
                <div style="width:33.33%">
                  <div class="title" style="border-bottom:1px solid">
                    母版
                  </div>
                  <div style="display:flex">
                    <div class="title" style="width: 36px;;border-bottom:1px solid">
                      经
                    </div>
                    <div class="text" style="width: calc(100% - 36px);border-bottom:1px solid;border-right:1px solid;">
                      <span v-if="list.zyslj">{{ list.zyslj }}%</span>
                    </div>
                  </div>
                  <div style="display:flex">
                    <div class="title" style="width: 36px;;">
                      纬
                    </div>
                    <div class="text" style="width: calc(100% - 36px);border-right:1px solid;">
                      <span v-if="list.zyslw"> {{ list.zyslw }}%</span>
                    </div>
                  </div>
                </div>
                <div style="width:33.33%">
                  <div class="title" style="border-bottom:1px solid">
                    纸样1
                  </div>
                  <div style="display:flex">
                    <div class="title" style="width: 36px;;border-bottom:1px solid">
                      经
                    </div>
                    <div class="text" style="width: calc(100% - 36px);border-bottom:1px solid;border-right:1px solid;">
                      <span v-if="list.long1">{{ list.long1 }}%</span>
                    </div>
                  </div>
                  <div style="display:flex">
                    <div class="title" style="width: 36px;;">
                      纬
                    </div>
                    <div class="text" style="width: calc(100% - 36px);border-right:1px solid;">
                      <span v-if="list.lat1">{{ list.lat1 }}%</span>

                    </div>
                  </div>
                </div>
                <div style="width:33.33%">
                  <div class="title" style="border-bottom:1px solid">
                    纸样2
                  </div>
                  <div style="display:flex">
                    <div class="title" style="width: 36px;;border-bottom:1px solid">
                      经
                    </div>
                    <div class="text" style="width: calc(100% - 36px);border-bottom:1px solid;border-right:1px solid;">
                      <span v-if="list.long2">{{ list.long2 }}%</span>
                    </div>
                  </div>
                  <div style="display:flex">
                    <div class="title" style="width: 36px;;">
                      纬
                    </div>
                    <div class="text" style="width: calc(100% - 36px);border-right:1px solid;">
                      <span v-if="list.lat2">{{ list.lat2 }}%</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div style="width:50%;display:flex">
              <div class="title" style="width: 26px;;line-height: 16px;">
                纸样数量
              </div>
              <div style="width: calc(100% - 26px);display:flex;align-items: center;text-align: left;padding:0 5px"
                class="text">
                {{ list.zyNum }}
              </div>
            </div>
          </div>
          <div style="border: 1px solid;border-top:none;display:flex">
            <div style="width:50%;display:flex">
              <div class="title" style="width: 100px;">
                面料名称
              </div>
              <div style="width: calc(100% - 100px);border-right:1px solid;padding:0 5px;    font-size: 12px;"
                class="text">
                <span v-for="item, i in list.bomNames" :key="i">{{ item }}</span>
              </div>
            </div>
            <div style="width:50%;display:flex">
              <div class="title" style="width: 100px;">
                面料正反面说明
              </div>
              <div style="width: calc(100% - 100px);padding:0 5px;font-size: 12px;" class="text">
                {{ list.fabricDesc }}
              </div>
            </div>
          </div>
          <div style="border: 1px solid;border-top:none;">
            <div style="display:flex">
              <div class="title" style="width: 100px;">
                裁床注意事项
              </div>
              <div
                style="width: calc(100% - 100px);padding:0 10px;font-size: 12px;white-space: pre-line;margin-top: -15px;"
                class="text">
                {{ list.cutting }}
              </div>
            </div>
          </div>
          <div style="border: 1px solid;border-top:none;">
            <div style="display:flex">
              <div class="title" style="width: 100px;">
                工序流程
              </div>
              <div
                style="width: calc(100% - 100px);padding:0 10px;font-size: 12px;white-space: pre-line;margin-top: -15px;"
                class="text">
                {{ list.process }}
              </div>
            </div>
          </div>
          <div style="border: 1px solid;border-top:none;"
            v-if="list.craftBillInterlining && list.craftBillInterlining.length">
            <div style="display:flex">
              <div class="title" style="width: 100px;">
                粘衬
              </div>
              <div style="width: calc(100% - 100px);">
                <a-row style="margin-top:-1px">
                  <a-col :span="4" class="contentH">
                    编号
                  </a-col>
                  <a-col :span="14" class="contentH">
                    部位
                  </a-col>
                  <a-col :span="2" class="contentH">
                    温度(℃)
                  </a-col>
                  <a-col :span="2" class="contentH">
                    时间(秒)
                  </a-col>
                  <a-col :span="2" class="contentH" style="border-right:none">
                    压力(KG)
                  </a-col>
                </a-row>
                <a-row v-for="item, i in list.craftBillInterlining" :key="i">
                  <a-col :span="4" class="contentH" style="border-bottom:none">
                    {{ item.code }}
                  </a-col>
                  <a-col :span="14" class="contentH" style="border-bottom:none;font-size:12px;line-height: 21px;">
                    {{ item.part }}
                  </a-col>
                  <a-col :span="2" class="contentH" style="border-bottom:none">
                    {{ item.temperature }}
                  </a-col>
                  <a-col :span="2" class="contentH" style="border-bottom:none">
                    {{ item.time }}
                  </a-col>
                  <a-col :span="2" class="contentH" style="border-bottom:none;border-right:none">
                    {{ item.pressure }}
                  </a-col>
                </a-row>
              </div>
            </div>
          </div>

          <div style="display:flex;border:1px solid;border-top: none;">
            <div style="width: calc(100% - 50px);">
              <a-row>
                <a-col :span="8">
                  <a-row class="title">
                    单位:cm
                  </a-row>
                  <a-row>
                    <a-col :span="3" class="contentT" style="font-size:12px">
                      序号
                    </a-col>
                    <a-col :span="6" class="contentT" style="font-size:12px">
                      号型/部位
                    </a-col>
                    <a-col :span="15" class="contentT" style="font-size:12px">
                      成衣测量说明
                    </a-col>
                  </a-row>
                  <a-row>

                    <a-row v-for="item, i in craftBillSize" :key="i">
                      <a-col :span="3" class="contentH">
                        {{ i + 1 }}
                      </a-col>
                      <a-col :span="6" class="contentH" style="font-size:12px">
                        {{ item.part }}
                      </a-col>
                      <a-col :span="15" class="contentE" style="overflow:hidden">
                        {{ item.clff }}
                      </a-col>
                    </a-row>
                  </a-row>
                </a-col>
                <a-col :span="8">
                  <a-row class="title" style="border-bottom:1px solid">
                    纸样尺寸
                  </a-row>
                  <a-row>
                    <div style="display:flex;flex-wrap:wrap">
                      <div v-for="item, i in sizelist" :key="i" class="contentH" :style="{
                        width: `${100 / sizelist.length}%`, borderTop: 0,
                        background: (['APN 73', 'LESS','LESS工服' ,'JNBY', 'JNBY工服','CROQUIS'].includes(brand) && item.sizeid == '03') || (brand == '蓬马' && ['29', '31', '35'].includes(item.sizeid)) || (brand == '童装' && ['30', '27'].includes(item.sizeid)) || (brand == '婴童' && xl == '连体衣' && ['21', '23'].includes(item.sizeid)) || (brand == '婴童' && xl != '连体衣' && item.sizeid == '24') ? 'yellow' : '#fff'
                      }">
                        {{ item.sizeid }}
                      </div>
                    </div>
                  </a-row>
                  <a-row style="margin-top: -2px;">
                    <div style="display:flex;flex-wrap:wrap;border-top:1px solid">
                      <div v-for="item, i in sizelist" :key="i" class="contentM"
                        :style="{ width: `${100 / sizelist.length}%` }">
                        <div>{{ item.model }}</div>
                      </div>
                    </div>

                  </a-row>
                  <a-row>
                    <div style="display:flex;flex-wrap:wrap" v-for="item, i in craftBillSize" :key="i">
                      <div v-for="subitem, index in sizelist" :key="index" class="contentH" :style="{
                        width: `${100 / sizelist.length}%`,
                        background: (['APN 73', 'LESS','LESS工服' , 'JNBY','JNBY工服', 'CROQUIS'].includes(brand) && item.sizeid == '03') || (brand == '蓬马' && ['29', '31', '35'].includes(item.sizeid)) || (brand == '童装' && ['30', '27'].includes(item.sizeid)) || (brand == '婴童' && xl == '连体衣' && ['21', '23'].includes(item.sizeid)) || (brand == '婴童' && xl != '连体衣' && item.sizeid == '24') ? 'yellow' : '#fff'
                      }">
                        <div v-for="x, i in item.info[1].detail" :key="i">
                          <span v-if="x.sizeId == subitem.sizeid">{{ x.sizeNum }}</span>

                        </div>
                      </div>
                    </div>
                  </a-row>
                </a-col>
                <a-col :span="8">
                  <a-row class="title" style="border-bottom:1px solid">
                    成衣尺寸
                  </a-row>
                  <a-row>
                    <div style="display:flex;flex-wrap:wrap">
                      <div v-for="item, i in sizelist" :key="i" class="contentH" :style="{
                        width: `${100 / sizelist.length}%`, borderTop: 0,
                        background: (['APN 73', 'LESS','LESS工服' , 'JNBY', 'JNBY工服','CROQUIS'].includes(brand) && item.sizeid == '03') || (brand == '蓬马' && ['29', '31', '35'].includes(item.sizeid)) || (brand == '童装' && ['30', '27'].includes(item.sizeid)) || (brand == '婴童' && xl == '连体衣' && ['21', '23'].includes(item.sizeid)) || (brand == '婴童' && xl != '连体衣' && item.sizeid == '24') ? 'yellow' : '#fff'
                      }">
                        {{ item.sizeid }}
                      </div>
                    </div>
                  </a-row>
                  <a-row style="margin-top: -2px;">
                    <div style="display:flex;flex-wrap:wrap;border-top:1px solid">
                      <div v-for="item, i in sizelist" :key="i" class="contentM"
                        :style="{ width: `${100 / sizelist.length}%` }">
                        <div>{{ item.model }}</div>
                      </div>
                    </div>

                  </a-row>
                  <a-row>
                    <div style="display:flex;flex-wrap:wrap" v-for="item, i in craftBillSize" :key="i">
                      <div v-for="subitem, index in sizelist" :key="index" class="contentH"
                        :style="{ width: `${100 / sizelist.length}%` }">
                        <div v-for="x, i in item.info[0].detail" :key="i">
                          <span v-if="x.sizeId == subitem.sizeid">{{ x.sizeNum }}</span>

                        </div>
                      </div>
                    </div>
                  </a-row>
                </a-col>
              </a-row>
            </div>
            <div
              style="width:50px;border-right:none;    display: flex;justify-content: space-between;flex-direction: column;"
              class="title">
              <a-row class="title" style="border-right:none;height:101px;">
                偏差
              </a-row>
              <a-row v-for="item, i in craftBillSize " :key="i" style="width:100%;border-right: none;" class="contentH">
                {{ item.diff }}

              </a-row>
            </div>
          </div>
          <div style="border: 1px solid;border-top:none;" v-if="['童装', '婴童', '蓬马'].includes(brand)">
            <div style="display:flex">
              <div class="title" style="width: 180px;">
                {{ brand }}注意事项
              </div>
              <div style="width: calc(100% - 180px);text-align:center" class="text">
                {{ threeContent }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </a-card>
</template>
<script>
import { getA4Print, getA3Print, getSpecImgPrint, getSpecPrint, getSizePrint, getSizeList } from '@api/rd/index'
import { round } from 'mathjs'
// import './style.css'
export default {
  components: {},

  data() {
    return {
      list: {},
      partList1: [],
      partList2: [],
      mainWidth: '60%',
      partList3: [],
      title: '新款扩色工艺单',
      tabMenu: '1',
      craftBillTemplateVos: [],
      allPart: [],
      specList: [],
      allColor: [],
      sizelist: [],
      craftBillSize: [],
      washNo: [],
      threeContent: '',
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo || null
    },
    sampleCode() {
      return this.$route.query.sampleCode || ''
    },
    xl() {
      return this.$route.query.xl || ''
    },
    brand() {
      return this.$route.query.brand || ''
    },
    id() {
      return this.$route.query.id || ''
    }
  },
  created() {
    this.getA4()
    var style = '<style>@page{size:A4 portrait}</style>';
    var ele = document.createElement('div');
    ele.innerHTML = style;
    document.getElementsByTagName('head')[0].appendChild(ele.firstElementChild)
  },
  beforeDestroy(){
    var style = '<style>@page{size:A4 portrait}</style>';
    var ele = document.createElement('div');
    ele.innerHTML = style;
    document.getElementsByTagName('head')[0].appendChild(ele.firstElementChild)
  },
  methods: {
    callback(key) {
      this.list = {}
      this.partList1 = []
      this.partList2 = []
      this.partList3 = []
      this.craftBillTemplateVos = []
      this.allPart = []
      this.specList = []
      if (key == 1) {
        this.title = '新款扩色工艺单'
        this.mainWidth = '60%'
        this.getA4()
      } else if (key == 2) {
        this.title = ''
        this.mainWidth = '1458px'
        this.getA3()
      } else if (key == 3) {
        this.mainWidth = '60%'
        this.getSpec()
      } else if (key == 4) {
        this.mainWidth = '1450px'
        this.getSpecImg()
      } else if (key == 5) {
        this.mainWidth = '1210px'
        this.getSizePrint()
        this.getSize()
      }
      if (key == 2) {
        var style = '<style>@page{size:A3 landscape}</style>';
        var ele = document.createElement('div');
        ele.innerHTML = style;
        document.getElementsByTagName('head')[0].appendChild(ele.firstElementChild)
      } else {
        var style = '<style>@page{size:A4 portrait}</style>';
        var ele = document.createElement('div');
        ele.innerHTML = style;
        document.getElementsByTagName('head')[0].appendChild(ele.firstElementChild)
      }
    },
    reset() {
      this.$emit('closePrint')
    },
    async getA4() {
      const params = {
        id: this.id
      }
      try {
        const res = await getA4Print('print', params)
        if (res.code == 200) {
          this.list = res.data
          this.craftBillTemplateVos = res.data.craftBillTemplate
          this.partList1 = this.list.stealth
          this.partList2 = this.list.piece
          this.partList3 = this.list.mark
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取新款扩色工艺单失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取新款扩色工艺单失败！')
      }
    },
    async getSize() {
      const params = {
        sampleCode: this.sampleCode
      }
      try {
        const res = await getSizeList('c17', params)
        if (res.code == 200) {
          this.sizelist = res.data
          this.sizelist.map((item) => {
            item.model = item.model.replace("/", "\n")
          })
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取工艺尺寸单失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取工艺尺寸单失败！')
      }
    },
    async getSizePrint() {
      const params = {
        id: this.id
      }
      try {
        const res = await getSizePrint('print', params)
        if (res.code == 200) {
          this.list = res.data
          if (this.list.bomNames.length) {
            this.list.bomNames = this.list.bomNames.toString()
          }
          if (this.list.craftBillSize.length) {
            this.craftBillSize = this.list.craftBillSize
            this.washNo = res.data.washNo
          }
          if (this.brand == '童装') {
            this.threeContent = '小童推码规则：100-120码以110为基码，130-160码以140为基码；'
          }
          if (this.brand == '蓬马') {
            this.threeContent = '蓬马推码规则：110--130码以130为基码，140--170码以150为基码；'
          }
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取工艺材料单失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取工艺材料单失败！')
      }
    },

    async getA3() {
      const params = {
        id: this.id
      }
      try {
        const res = await getA3Print('print', params)
        if (res.code == 200) {
          this.list = res.data
          this.craftBillTemplateVos = res.data.craftBillTemplate
          // this.partList3 = this.list.mark
          // this.partList1 = this.list.stealth
          // this.partList2 = this.list.piece
          // const newArr = []
          // this.list.others.map(x => {
          //   x.name = x.partName
          //   let index = newArr.findIndex(y => y.name == x.name)
          //   if (index == -1) {
          //     newArr.push({
          //       name: x.name,
          //       list: [
          //         {
          //           imgurl: x.imgurl,
          //           description: x.description
          //         }
          //       ]
          //     })
          //   } else {
          //     newArr[index].list.push({
          //       imgurl: x.imgurl,
          //       description: x.description
          //     })
          //   }
          // })
          this.allPart = this.list.others
          console.log(this.allPart)
          // this.specList = res.data.craftBillSpec
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取大货工艺单详情失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取大货工艺单详情失败！')
      }
    },
    async getSpec() {
      const params = {
        id: this.id
      }
      try {
        const res = await getSpecPrint('print', params)
        if (res.code == 200) {
          this.list = res.data
          const newArr = []
          this.list.craftBillSpec.map(x => {
            x.name = x.specName
            let index = newArr.findIndex(y => y.name == x.name)
            if (index == -1) {
              newArr.push({
                name: x.name,
                list: [
                  {
                    jumpSize: x.jumpSize,
                    styColorId: x.styColorId,
                    imgurl: x.imgurl
                  }
                ]
              })
            } else {
              newArr[index].list.push({
                jumpSize: x.jumpSize,
                styColorId: x.styColorId,
                imgurl: x.imgurl
              })
            }
          })
          this.specList = newArr
          this.allColor = []
          this.specList.map(item => {
            item.list.map(subitem => {
              this.allColor = this.allColor.concat(subitem.styColorId.split('/'))
            })
          })
          this.allColor = [...new Set(this.allColor)]
          this.list.allColor = this.allColor.length + '色(' + this.allColor.toString() + ')'
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取特殊工艺确认单失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取特殊工艺确认单失败！')
      }
    },
    async getSpecImg() {
      const params = {
        id: this.id
      }
      try {
        const res = await getSpecImgPrint('print', params)
        if (res.code == 200) {
          this.list = res.data
          this.specList = res.data.craftBillSpec
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取特艺定位花打印模版失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取特艺定位花打印模版失败！')
      }
    },
    loadimg(obj, item) {
      let width = obj.currentTarget.width + 26
      console.log(width)
      let height = obj.currentTarget.height
      let ratio = round(width / height)
      // console.log(ratio)
      let itemWidth
      if (item.width) {
        itemWidth = item.width
      } else {
        itemWidth = 0
      }
      item.width = itemWidth + ratio * 25
      item.num = ratio
      item.height = width / ratio
      this.$forceUpdate()
    }
  }
}
</script>
<style>
:root {
  /* --A3: A3 landscape; */
  --A3: A4 portrait;
  --color: red
}

/* 
@page {
  size: var(--A3);
}

.aa {
  width: 100px;
  height: 100px;
  background: var(--color);
} */

#rd .ant-descriptions-bordered .ant-descriptions-item-label {
  font-weight: 500;
  font-size: 16px;
  padding: 0;
}

#rd .ant-descriptions-bordered .ant-descriptions-item-content,
#rd .ant-descriptions-bordered .ant-descriptions-item-label {
  border-width: 1px 0 0 1px;
  border-style: solid;
  padding: 0;
  color: #000;
}

#rd .ant-descriptions-bordered .ant-descriptions-view {
  border-width: 0 1px 0 0;
  border-style: solid;
  border-color: #000;
  border-radius: 0;
}

#rd .ant-descriptions-title {
  font-size: 24px;
  margin-bottom: 10px;
}

#firstDe .ant-descriptions-item-content {
  font-size: 14px !important;
}

#rd .ant-descriptions-item-content {
  font-size: 14px;
}
</style>
<style scoped>
.specImg:not(:last-child) {
  page-break-after: always;
  width: 100%;
}

.specPic {
  /* height: 300px; */
  width: 100%;
  border: 1px solid;
  border-top: none;
  display: flex;
  padding: 10px;
}

@media print {
  .specPic {
    height: 900px !important
  }

}

/* @page{
    size: A4 portrait ;
} */

.title {
  font-weight: 500;
  border-right: 1px solid;
  text-align: center;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  /* font-size: 18px; */
  color: black;
}

.overText {
  font-size: 13px;
  text-overflow: ellipsis;
  word-break: break-all;
  display: -webkit-box;
  color: black;
  line-height: 1.2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#photo .ant-descriptions-bordered .ant-descriptions-item-label {
  background-color: #fff;
}

.labelStr .ant-descriptions-item-label {
  width: 40px;
  writing-mode: tb;
  letter-spacing: 10px;
  text-align: center;
}

.labelStr2 .ant-descriptions-item-label {
  width: 180px;
}

/* @page {
  size: auto;
} */


.box {
  width: 76px;
  background: #fafafa;
  font-weight: 500;
  font-size: 18px;
  color: black;
  writing-mode: tb;
  padding: 16px 24px;
  letter-spacing: 10px;
  text-align: center;
  border-bottom: 1px solid #e8e8e8;
}

.specTitle {
  height: 32px;
  background: #e1e1e1;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 2em;
  color: #000;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  margin-top: -1px;
}

.color {
  height: 42px;
  font-size: 14px;
  margin-top: 10px;
  text-align: center;
  line-height: 1.5em;
}

.comfirm {
  padding: 5px;
  line-height: 1.5em;
  height: 94px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  border-top: 1px solid #000;
  color: #000;
  justify-content: center;
  flex-direction: column;
  display: flex;
  margin-top: -1px;
}

.contentH {
  border-top: 1px solid;
  border-right: 1px solid;
  height: 40px;
  /* font-size: 16px; */
  text-align: center;
  line-height: 40px;
  color: black;
  font-weight: 500;
  overflow: hidden;
}

.contentE {
  border-top: 1px solid;
  border-right: 1px solid;
  height: 40px;
  font-size: 12px;
  color: black;
  text-align: center;
  font-weight: 500;
}

.contentT {
  border-top: 1px solid;
  border-right: 1px solid;
  height: 80px;
  /* font-size: 16px; */
  color: black;
  text-align: center;
  line-height: 80px;
  font-weight: 500;
}

.contentM {
  border-right: 1px solid;
  height: 40px;
  font-size: 12px;
  color: black;
  text-align: center;
  white-space: pre-line;
  font-weight: 500;
}

.lastTitle {
  font-size: 18px;
  font-weight: 500;
  color: black;
  background: #fafafa;
  line-height: 60px;
  border: 1px solid #e8e8e8;
  height: 60px;
  text-align: center;
}

.paper {
  font-size: 18px;
  font-weight: 500;
  background: #fafafa;
  line-height: 97px;
  height: 120px;
  text-align: center;
  writing-mode: tb;
  color: rgba(0, 0, 0, 0.85);
  letter-spacing: 10px;
}

.paper2 {
  font-weight: 500;
  font-size: 18px;
  width: 180px;
  padding: 16px 24px;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgba(0, 0, 0, 0.85);
}
</style>
<style>
#changecol .ant-col-5 {
  width: 20%;
}
</style>